import React, { useCallback, useEffect, useState } from "react"
import { LighthouseResultItem } from "@/models/result-item"
import { get } from "@/utils/request"
import { Table, Button, Input } from "antd"
import dayjs from "dayjs"
import { RouteComponentProps } from "react-router-dom"
import { CreateDrawer } from "./create-drawer"
import { ProgressDrawer } from "./progress-drawer"
import styled from "styled-components"
import Form from "antd/lib/form/Form"

const StyledBtnGroup = styled.div`
  & > button:first-child {
    margin-left: 0;
  }
  & > button {
    margin-left: 10px;
  }
`

const CreateListIndex: React.FC<RouteComponentProps> = ({ history }) => {
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState<LighthouseResultItem[]>()
  const [activeUUID, setActiveUUID] = useState("")
  const [createDrawerVisible, setCreateDrawerVisible] = useState(false)
  const [progressDrawerVisible, setProgressDrawerVisible] = useState(false)

  const getData = useCallback(() => {
    setLoading(true)
    get<LighthouseResultItem[]>("/pegasus/api/list_all/").then((res) => {
      setList(res.data)
      setLoading(false)
    })
  }, [])

  useEffect(() => {
    getData()
  }, [])

  function renderTitle() {
    return (
      <div style={{ textAlign: "right" }}>
        <Form layout="horizontal">
          <Input
            type="text"
            placeholder="输入查询页面地址"
            style={{ width: 240, marginRight: 10 }}
          />
          <Button style={{ marginRight: 10 }}>查询</Button>
          <Button type="primary" onClick={() => setCreateDrawerVisible(true)}>
            创建
          </Button>
        </Form>
      </div>
    )
  }

  return (
    <div>
      <div>
        <Table
          dataSource={list || []}
          rowKey="id"
          title={renderTitle}
          loading={loading}
        >
          <Table.Column key="id" dataIndex="id" title="#" />
          <Table.Column
            key="target_url"
            dataIndex="target_url"
            title="目标页面"
          />
          <Table.Column
            key="create_time"
            dataIndex="create_time"
            title="创建时间"
            align="center"
            render={(time: string) => dayjs(time).format("YYYY-MM-DD HH:mm")}
          />
          <Table.Column
            key="lcp_time"
            dataIndex="lcp_time"
            title="LCP"
            align="center"
            render={(time: number) => `${Number(time / 1000).toFixed(3)}秒`}
          />
          <Table.Column
            key="action"
            dataIndex="id"
            render={(_, record: LighthouseResultItem) => (
              <StyledBtnGroup>
                <Button
                  type="primary"
                  onClick={() => {
                    history.push(`/detail/${record.uuid}`)
                  }}
                >
                  查看
                </Button>
                <Button type="dashed" danger>
                  删除
                </Button>
              </StyledBtnGroup>
            )}
          />
        </Table>
      </div>
      <CreateDrawer
        visible={createDrawerVisible}
        onClose={() => setCreateDrawerVisible(false)}
        onSuccess={(uuid: string) => {
          setActiveUUID(uuid)
          setCreateDrawerVisible(false)
          setProgressDrawerVisible(true)
        }}
      />
      <ProgressDrawer
        uuid={activeUUID}
        visible={progressDrawerVisible}
        onClose={() => {
          setProgressDrawerVisible(false)
          getData()
        }}
      />
    </div>
  )
}

export default CreateListIndex
